import React, { useState, useRef, useEffect } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import './TemplateCarousel.scss';

interface TemplateItem {
  id: number;
  src: string;
  type: 'poster' | 'longPage' | 'video' | 'h5';
  title: string;
  author: string;
  views: number;
}

interface TemplateCarouselProps {
  items: TemplateItem[];
  title: string;
  subtitle: string;
}

const TemplateCarousel: React.FC<TemplateCarouselProps> = ({ items, title, subtitle }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [showArrows, setShowArrows] = useState(false);
  const [hoveredItem, setHoveredItem] = useState<number | null>(null);
  const carouselRef = useRef<HTMLDivElement>(null);
  const wrapperRef = useRef<HTMLDivElement>(null);

  const ITEM_WIDTH = 240;
  const GAP = 20;
  const ITEMS_PER_PAGE = 5;

  useEffect(() => {
    const handleResize = () => {
      if (carouselRef.current && wrapperRef.current) {
        const containerWidth = carouselRef.current.offsetWidth;
        const contentWidth = wrapperRef.current.scrollWidth;
        setShowArrows(contentWidth > containerWidth);
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [items]);

  const handlePrev = () => {
    if (currentIndex > 0) {
      setCurrentIndex(prev => prev - 1);
    }
  };

  const handleNext = () => {
    if (currentIndex < items.length - ITEMS_PER_PAGE) {
      setCurrentIndex(prev => prev + 1);
    }
  };

  const renderTemplateItem = (item: TemplateItem) => {
    const isHovered = hoveredItem === item.id;
    
    return (
      <div 
        className={`template-item ${item.type}`}
        key={item.id}
        onMouseEnter={() => setHoveredItem(item.id)}
        onMouseLeave={() => setHoveredItem(null)}
      >
        <div className="template-image-container">
          <img src={item.src} alt={item.title} />
          {item.type === 'h5' && (
            <div className="h5-badge">H5</div>
          )}
          {item.type === 'video' && (
            <div className="video-badge">
              <span className="play-icon">▶</span>
            </div>
          )}
          <div className={`hover-overlay ${isHovered ? 'active' : ''}`}>
            <div className="hover-content">
              <button className="preview-btn">预览</button>
              <button className="use-btn">使用</button>
            </div>
          </div>
        </div>
        <div className="template-info">
          <h3>{item.title}</h3>
          <div className="template-meta">
            <span className="author">{item.author}</span>
            <span className="views">{item.views} 次浏览</span>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="template-carousel">
      <div className="carousel-header">
        <div className="title-section">
          <h2>{title}</h2>
          <p>{subtitle}</p>
        </div>
        <div className="navigation-arrows">
          {showArrows && (
            <>
              <button 
                className={`arrow-btn prev ${currentIndex === 0 ? 'disabled' : ''}`}
                onClick={handlePrev}
                disabled={currentIndex === 0}
              >
                <LeftOutlined />
              </button>
              <button 
                className={`arrow-btn next ${currentIndex >= items.length - ITEMS_PER_PAGE ? 'disabled' : ''}`}
                onClick={handleNext}
                disabled={currentIndex >= items.length - ITEMS_PER_PAGE}
              >
                <RightOutlined />
              </button>
            </>
          )}
        </div>
      </div>
      
      <div className="carousel-container" ref={carouselRef}>
        <div 
          className="carousel-wrapper"
          ref={wrapperRef}
          style={{
            transform: `translateX(-${currentIndex * (ITEM_WIDTH + GAP)}px)`,
            transition: 'transform 0.3s ease-in-out'
          }}
        >
          {items.map(renderTemplateItem)}
        </div>
      </div>
    </div>
  );
};

export default TemplateCarousel; 